<template>
	<view>
		<view class="setting_list" v-for="(item, index) in list.ListCP" :key="index">
			<view class="left">
				<u-switch v-model="item.IsEnable" :active-value="0" :inactive-value="1"></u-switch>
				<text class="name">{{ item.PrintPNotes }}</text>
			</view>
			<view class="right">
				<text class="price"> {{ item.OriginalPrice }} 元</text>
				<image @click="editPrice(item, index)" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/edit.png"
					mode=""></image>
			</view>
		</view>
		<view class="couTitle">
			<view class="couText">优惠设置</view>
			<view class="couAddBtn" @click="addCou()">新增</view>
		</view>
		<view class="setting_list" v-for="(item, index) in couponList" :key="index">
			<view class="left">
				<view class="name couCell">
					<input class="couInp" type="number" v-model="item.StartNum">
				</view>
				页
				<view class="name">~</view>
				<view class="name couCell">
					<input class="couInp" type="number" v-model="item.EndNum">
				</view>
				页
			</view>
			<view class="right">
				<view class="name couCell">
					<input class="couInp" type="number" v-model="item.Discount" :max="10">
				</view>
				折
				<image v-if="shopType != '自营'" @click="delCou(index)"
					src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/delete.png" mode=""></image>
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="fix_bottom" v-if="shopType != '自营'">
			<u-button type="primary" :custom-style="{ background: '#3572fe' }" text="保存" @click="savePrice"></u-button>
		</view>
		<!-- 占位盒子，避免列别过多 -->
		<view class="block">

		</view>

		<!-- 修改价格model框 -->
		<u-modal :show="showEditModal" title="修改价格" @confirm="confirm" showCancelButton @cancel="cancel">
			<view class="slot-content">
				<u-input @change="change" placeholder="请输入价格" border="surround" v-model="price" type="digit"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shopID: null,
			list: [],
			couponList: [
				{ "StartNum": 1, "EndNum": 10, "Discount": 8.8 }, { "StartNum": 11, "EndNum": 30, "Discount": 8 }
			],
			showEditModal: false,
			price: '',
			// 大列表
			fatherIndex: '',
			// 小列表
			childIndex: '',
			previousValue: '',
			shopType: '非自营'
		};
	},
	onLoad(options) {
		console.log(options);
		if (options.ShopID) {
			this.shopID = options.ShopID
			this.shopType = options.ShopType
			this.getList(options.ShopID)
			this.getCouList()
		}
		if (options.ShopName) {
			uni.setNavigationBarTitle({
				title: options.ShopName+'价格管理'
			});
		}
	},
	methods: {
		async savePrice() {
			console.log(JSON.stringify(this.list));
			let res = await this.$api.post('MLogin/SetShopsCommodity', this.list)
			const ItemStr = JSON.parse(JSON.stringify(this.couponList))
			let res2 = await this.$api.post('Printing/SetPromotion', { ShopID: this.shopID, ItemStr: JSON.stringify(ItemStr) })
			console.log(res);
			if (res.code == 0) {
				uni.showToast({
					title: `修改成功`,
					icon: `none`
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			}
		},
		async getList(ShopID) {
			console.log(ShopID);
			let res = await this.$api.post('MLogin/GetShopsCommodity', {
				ShopID
			})
			console.log(res);
			this.list = res.data
		},

		editPrice(item, index) {
			this.showEditModal = true

			this.childIndex = index

			this.price = item.OriginalPrice
		},
		confirm() {
			if (this.price < 0.1) {
				uni.showToast({
					title: `不能低于0.1元`,
					icon: 'none'
				})
				return
			}
			this.showEditModal = false
			// 修改价格
			this.list.ListCP[this.childIndex].OriginalPrice = this.price
			this.price = ''

		},
		cancel() {
			this.showEditModal = false
			this.price = ''
		},
		change(e) {
			const regex = /^\d{0,2}(\.\d{0,2})?$/;
			if (!regex.test(e)) {
				this.price = this.previousValue; // 恢复为之前的有效值
				uni.showToast({
					title: '输入无效',
					icon: 'none'
				});
				console.log(this.previousValue);
			} else {
				this.previousValue = e; // 更新之前的有效值
				console.log(this.previousValue);
			}

		},
		// 获取优惠设置
		async getCouList() {
			let res = await this.$api.post('Printing/GetPromotion', {
				ShopID: this.shopID
			})
			console.log(res, 'rrr');
			this.couponList = res.data
		},
		addCou() {
			const data = {
				StartNum: this.couponList[this.couponList.length - 1].EndNum + 1, EndNum: this.couponList[this.couponList.length - 1].EndNum + 10, Discount: 10, ShopID: this.shopID
			}
			this.couponList.push(data)
		},
		delCou(index) {
			const that = this
			uni.showModal({
				title: '温馨提示',
				content: '是否确定删除',
				success: async function (rs) {
					if (rs.confirm) {
						that.couponList.splice(index, 1)
					} else if (rs.cancel) {

					}
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.block {
	height: 180rpx;
}

::v-deep .u-button__text {
	color: white;
}

.fix_bottom {
	display: flex;
	position: fixed;
	bottom: 0;
	align-items: center;
	height: 180rpx;
	width: 100%;
	padding: 20rpx;
}

::v-deep .u-collapse-item__content__text {
	padding: 0 !important;
}

.setting_list {
	font-size: 30rpx;

	.price {
		color: #2049ee;
	}

	.name {
		margin-left: 20rpx;
	}

	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #f7f7f7;
	padding: 24rpx 30rpx;

	&:nth-last-child(1) {
		border-bottom: none;
	}

	view {
		display: flex;
		align-items: center;
	}

	.right {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}

	.couCell {
		width: 100rpx;
		border: 2rpx solid #2049ee;
		margin-right: 6rpx;

		.couInp {
			width: 100%;
			text-align: center;
		}
	}

}

.couTitle {
	width: 100%;
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.couText {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;

	}

	.couAddBtn {
		background: #3572FE;
		color: white;
		width: 96rpx;
		height: 48rpx;
		background: #3572FE;
		border-radius: 8rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 26rpx;
	}
}
</style>